<template>
  <div class="layout-container test-sample-data-dialog">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="onHandleClick">
      <el-tab-pane label="使用描述项" name="initDeployRelateDescript">
        <InitDeployRelateDescript
          ref="initDeployRef"
          :interferType="props.interferType"
          :dataSourceObject="props.dataSourceObject"
        />
      </el-tab-pane>
      <el-tab-pane label="背景环境过程描述项" name="testExplaineDescript">
        <TestRelateDescript
          ref="bgExplainRef"
          :dataSourceObject="props.dataSourceObject"
        />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import type { TabsInstance } from 'element-plus';
import type { TabsPaneContext } from 'element-plus';
import InitDeployRelateDescript from './InitDeployRelateDescript.vue';
import TestRelateDescript from './TestExplainDescript.vue';

const tabPosition = ref<TabsInstance['tabPosition']>('left');
const activeName = ref<string>('initDeployRelateDescript');

const initDeployRef = ref();
const bgExplainRef = ref();

// 接收父组件传递过来的props
const props = defineProps({
  interferType: { type: String, default: '舰载有源干扰-雷达' },
  dataSourceObject: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

// 页签切换事件
const onHandleClick = (TabPaneName: string) => {
  activeName.value = TabPaneName;
};

// 校验表单
const validateFieldFun = async () => {
  await initDeployRef.value.onSubmit(initDeployRef.value.formRef);
  await bgExplainRef.value.onSubmit(bgExplainRef.value.formRef);
  if (initDeployRef.value.validateState3 || bgExplainRef.value.validateState4) {
    return true;
  }
};

defineExpose({
  validateFieldFun,
  // validateState3: initDeployRef.value.validateState3,
  // validateState4: bgExplainRef.value.validateState4,
});
</script>

<style lang="scss" scoped>
@import '@/assets/style/buttons';
.buttons {
  box-shadow: 0px 0px 10px rgba(218, 222, 224, 1);
  height: 50px;
  line-height: 50px;
}
:deep() {
  .el-tabs__nav-wrap::after {
    width: 280px;
  }
}
</style>
